<!-- 表格头部选择组件 -->
<!-- 传入属性 -->
<!-- 
timerList:时间区域选择数组  例子：['昨日', '近七日', '本月']；若是此参数不传，则隐藏其功能区
itemList:下拉渲染数组值  title:左边名称  defaultText初始化的文字  showText选中后展示文字  status是否开启隐藏区域（     false关闭，true开启）  list隐藏区域的内容成员【name成员名称 onlyId与后端配的传递信息  status是否选中的状态（false       未选中，true选中）】
     例子：[{title: '劵码类型',defaultText: '请选择劵码类型',showText: '',status: false,
     list: [{ name: '优惠券', onlyId: 0, status: false },{ name: '折扣券', onlyId: 1, status: false},{ name: '满减券', onlyId: 2, status: false },],},] 
btnShow:是否展示确认等按键  默认展示 true-->
		
<!-- 传入方法 -->
<!-- 
clickTimer:使用父组件函数，传递选择的点击部分成员位置信息
merchantQuery:查询点击函数 使用父级函数 传递用户选中的集中数组 queryList +成员区域 timerIndex 选择的位置
merchantReset:重置点击函数 使用父级函数 传递用户选中的集中数组 queryList +成员区域 timerIndex 选择的位置
typeChange:当只有一个成员时，可以使用此点击函数，传递给父组件点击的这个成员所有信息+选择的位置信息
 -->

<template>
  <div class="dropDown" @mouseleave="leave">
    <!-- 成员区域 -->
    <!-- ------------------------------------------------------------------------------------------------ -->
    <div class="dropDown-features" v-if="timerList.length != 0">
      <div
        v-for="(value, index) in timerList"
        :key="index"
        :class="
          index == timerIndex ? 'time-features-click' : 'time-features-noclick'
        "
        @click="timeFeatures(index, value)"
      >
        {{ value }}
      </div>
    </div>

    <!-- 下拉类型 -->
    <!-- ------------------------------------------------------------------------------------------------ -->
    <div
      class="dropDown-item"
      @mouseleave="leave"
      v-for="(value, index) in itemShowList"
      :key="index"
    >
      <span>{{ value.title }}</span>
      <!-- 选择内容区域 -->
      <div class="dropDown-item-show" @click="openOrClose(index, value)">
        <!-- 若展示数据showText为空则展示默认字段defaultText，否则展示此数据showText -->
        {{ value.showText ? value.showText : value.defaultText }}
        <span></span>
      </div>
      <!-- 内容隐藏区域 -->
      <div class="dropDown-item-change" v-show="value.status">
        <!-- 成员循环区域 -->
        <div
          v-for="(val, ind) in value.list"
          :key="ind"
          @click="typeClick(value, ind, val)"
        >
          {{ val.name }}
        </div>
      </div>
    </div>

    <!-- 查询和重置按键 -->
    <!-- ------------------------------------------------------------------------------------------------ -->
    <div class="dropDown-btn" v-if="btnShow">
      <span @click="query">查询</span>
      <span @click="Reset">重置</span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    // 下拉渲染数组值  title:左边名称  defaultText初始化的文字  showText选中后展示文字  status是否开启隐藏区域（false关闭，true开启）  list隐藏区域的内容成员【name成员名称 onlyId与后端配的传递信息  status是否选中的状态（false未选中，true选中）】
    itemList: {
      type: [Array],
      default() {
        return [];
      },
    },

    // 时间区域选择数组
    timerList: {
      type: [Array],
      default() {
        return [];
      },
    },

    // 是否展示确认等按键  默认展示 true
    btnShow: {
      type: [Boolean],
      default: true,
    },
  },
  data() {
    return {
      // 判断是否是选择成员
      timerIndex: "",

      // 承接选择下拉渲染数组
      itemShowList: [],
      // 查询点击返回数据承接数组
      queryList: [],
    };
  },
  watch: {
    // 监听位置变化的内容，将位置信息传递给父级
    timerIndex(index) {
      // 使用父组件函数，传递选择的点击部分成员位置信息
      this.$emit("clickTimer", { index: index });
    },
  },
  methods: {
    // 时间功能选择区域点击函数
    timeFeatures(index, value) {
      this.timerIndex = index;
    },

    // 鼠标移出事件
    leave() {
      // 关闭所有成员弹窗
      this.itemShowList.forEach((v) => (v.status = false));
    },

    // 劵码类型隐藏区域开关点击函数 index未当时点击的位置信息
    openOrClose(index, value) {
      if (value.status) {
        value.status = false;
        return;
      }

      // 循环遍历承接选择下拉渲染数组itemShowList，根据选中的位置信息进行开关隐藏区域（选中的打开，未选中的关闭）
      this.itemShowList.forEach((v, i) => {
        index == i ? (v.status = true) : (v.status = false);
      });
    },

    // 隐藏区域成员点击函数  参数value整个父级对象  index子级成员点击位置信息
    typeClick(value, index, val) {
      // 循环遍历选中的整个父级对象中的子级数组list
      value.list.forEach((v, i) => {
        // 判断是否与选中的位置信息一致
        if (index == i) {
          // 改变选中成员的状态
          v.status = true;
          // 同步父级中显示的内容信息
          value.showText = v.name;
          // 关闭隐藏区域
          value.status = false;
        } else {
          // 未选中的成员状态都为false
          v.status = false;
        }
      });

      // 初始化查询点击返回数据承接数组
      this.queryList = [];
      // 循环遍历承接选择下拉渲染数组itemShowList
      this.itemShowList.forEach((v) => {
        // 获取选中的子级成员
        let choice = v.list.find((v) => v.status === true);
        // 查询点击返回数据承接数组queryList添加成员，若choice为空及用户未选择，则返空，若是选中了，则返选择的后端需要数据onlyId
        this.queryList.push(choice ? choice.onlyId : "");
      });

      // 当只有一个成员时，可以使用此点击函数，传递给父组件点击的这个成员所有信息+选择的位置信息
      this.$emit("typeChange", {
        value: value,
        val: val,
        queryList: this.queryList,
      });
    },

    // 查询点击函数
    query() {
      // 初始化查询点击返回数据承接数组
      this.queryList = [];
      // 循环遍历承接选择下拉渲染数组itemShowList
      this.itemShowList.forEach((v) => {
        // 获取选中的子级成员
        let choice = v.list.find((v) => v.status === true);
        // 查询点击返回数据承接数组queryList添加成员，若choice为空及用户未选择，则返空，若是选中了，则返选择的后端需要数据onlyId
        this.queryList.push(choice ? choice.onlyId : "");
      });
      // 使用父级函数 传递用户选中的集中数组 queryList +成员区域 timerIndex 选择的位置
      this.$emit("merchantQuery", {
        queryList: this.queryList,
        index: this.timerIndex,
      });
    },

    // 重置点击函数
    Reset() {
      // 初始化显示数据
      this.itemShowList.forEach((v) => {
        v.status = v.list.status = false;
        v.showText = "";
		v.list.forEach((val) => {
		                    val.status = false;
		                });
      });
      this.queryList = [];
      this.timerList.length != 0
        ? (this.timerIndex = 0)
        : (this.timerIndex = "");

      // 使用父级函数 传递用户选中的集中数组 queryList +成员区域 timerIndex 选择的位置
      this.$emit("merchantReset", {
        queryList: this.queryList,
        index: this.timerIndex,
      });
    },
  },

  created() {
    // 将传递过来的渲染数组itemList 同步给承接数组itemShowList
    if (this.itemList.length != 0) {
      this.itemShowList = this.itemList;
    }
    // 用户信息选中的时间功能区成员位置
    this.timerList.length != 0 ? (this.timerIndex = 0) : (this.timerIndex = "");
  },
};
</script>

<style scoped>
/* 表格头部选择组件 */
.dropDown {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  /* margin: 15px auto auto auto; */
  position: relative;
}

/* 时间区域功能按键 */
/* -------------------------------------------------------------------------------------------- */
.dropDown-features {
  height: 32px;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  margin-right: 18px;
}
/* 功能区域成员样式 */
.dropDown-features div {
  height: 100%;
  font-size: 16px;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 400;
  text-align: center;
  color: #f2f7fc;
  line-height: 32px;
  padding: 0 14px;
  margin-right: 1px;
  transition: all 0.5s;
}
/* 选中成员样式 */
.time-features-click {
  background: #00a0ff;
  font-size: 14px;
  font-weight: 400;
  color: #ffffff;
}
/* 未被选中样式 */
.time-features-noclick {
  background: #32395e;
}

/* 选择成员外层 */
/* -------------------------------------------------------------------------------------------- */
.dropDown-item {
  color: #fff;
  font-size: 16px;
  margin-right: 10px;
  display: flex;
  align-items: center;
  position: relative;
}
/* 标题 */
.dropDown-item > span {
  margin-right: 5px;
}
/* input框样式 */
.dropDown-item > input {
  outline-style: none;
  margin-left: 5px;
  height: 30px;
  padding-left: 10px;
  background-color: #32395e;
  border-radius: 4px;
  border: none;
  color: rgb(192, 196, 204);
}
/* input框提示文字样式 */
::-webkit-input-placeholder {
  color: rgb(192, 196, 204);
  font-size: 14px;
}

/* 成员显示区域样式 */
.dropDown-item-show {
  margin-left: 5px;
  width: 160px;
  height: 30px;
  padding-left: 10px;
  background-color: #32395e;
  border-radius: 4px;
  border: none;
  text-align: left;
  line-height: 30px;
  color: rgb(192, 196, 204);
  font-size: 14px;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dropDown-item-show > span {
  width: 10px;
  height: 10px;
  background-image: url("https://oss4.komect.com/equity-base/cms/下拉.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: absolute;
  right: 5px;
}
/* 成员隐藏区域样式 */
.dropDown-item-change {
  position: absolute;
  width: 170px;
  right: 0;
  top: 100%;
  text-align: center;
  background: #fff;
  z-index: 9999;
}
/* 隐藏区域组成成员样式 */
.dropDown-item-change > div {
  width: 100%;
  /* height: 30px; */
  /* line-height: 30px; */
  padding: 5px 0;
  font-size: 14px;
  color: #000;
}
/* 隐藏成员hover样式 */
.dropDown-item-change > div:hover {
  background: gray;
  font-weight: bold;
  color: #fff;
}

/* 查询和重置按键样式 */
.dropDown-btn {
  width: 152px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  color: #fff;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  right: 0;
}
.dropDown-btn > span {
  width: 70px;
  height: 100%;
  border-radius: 4px;
}
.dropDown-btn > span:nth-of-type(1) {
  background: #00a0ff;
}
.dropDown-btn > span:nth-of-type(2) {
  background: #2dbd6d;
}
</style>
